@extends('process-department.layouts')
@section('style')
    <meta name="_token" content="{{ csrf_token() }}"/>
    <style>
        .process-index-th{
            text-align: center;
            color: #676767;
        }
        .process-index-td {
            text-align: center;
            color: #676767;
        }
        .title_label {
            color: #595959;
            margin-top: 10%;
            font-size: 15px;
        }

        .ico_img {
            width: 85px;
            height: 80px;
            margin-top: -20px;
        }


        .time{
            display: inline-block;
            position: relative;
            margin: 0px;
            padding: 0px;
            font-size: 16px;
        }
        .time::before {
            content: '';
            position: absolute;
            top: 110px;
            left: 0;
            height: 4px;
            width: 100%;
            margin: 0;
            padding: 0;
            background: #ddd;
            z-index: -1;
        }
        .time::after{
            content: "";
            display: block;
            clear: both;
        }



        .time2{
            display: inline-block;
            position: relative;
            /*margin-left: 10px;*/
            padding: 0px;
            font-size: 13px;
            margin-bottom: 35px;
        }
        .time2::before {
            content: '';
            position: absolute;
            top: 0px;
            left: 0;
            height: 4px;
            width: 100%;
            margin: 0;
            padding: 0;
            background: #ddd;
            z-index: -1;
        }
        .time2::after{
            content: "";
            display: block;
            clear: both;
        }

        .a_tm_info {
            position: relative;
            font-size:14px;
        }
        .a_tm_info::before {
            content: '';
            position: absolute;
            top: 0;
            left: 135px;
            height: 100%;
            width: 4px;
            background: #ddd;
            z-index: -1;
        }
        .a_tm_info::after{
            content: '';
            display: table;
            clear: both;
        }
        .l_left{
            float: left;
        }
        .l_left p{
            margin: 0;
            padding: 0;
            text-align: right;
        }
        .l_left>div{
            width: 110px;
        }
        .l_right p:first-child{
            font: 16px '微软雅黑';
        }
        .l_green{
            color: rgb(87, 188, 52);
        }

        .l_center{
            width: 55px;
            float: left;
            text-align: center;
        }
        .l_center>i{
            background-color: white;
        }
        .l_right{
            float: left;
        }
        .l_orange{
            color: rgb(255, 144, 16);
        }
        .l_gray{
            color: rgb(181, 181, 181);
        }
        .l_quickInformation{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 200px;
            cursor: pointer;
        }
        .l_content_box{
            width: 200px;
            margin: 0 auto;
        }
        /*竖排文字*/
        .l_top{
            width: 20px;
        }
        .l_shuzhe{
            height:200px;
            -webkit-writing-mode: vertical-lr;
            writing-mode: vertical-lr;
            /*font-size:16px;*/
        }

        .l_shuzhe_shang{
            direction:rtl;
            unicode-bidi:bidi-override;
            width: 22px;
            height: 100px;
        }

        .l_shuzhe_xia{
            /*direction:rtl;
            text-align: left;*/

        }
        .l_heng_shang{
            /*height: 90px;*/
            text-align: start;
        }
        .l_heng_xia{
            position: absolute;
            top: 125px;
            left: 0;
        }
        .time span{
            display: inline-block;
        }
        .time2::before {
            content: '';
            position: absolute;
            top: 0px;
            left: 0;
            height: 4px;
            width: 100%;
            margin: 0;
            padding: 0;
            background: #ddd;
            z-index: 1;
        }
        .time2::after{
            content: "";
            display: block;
            clear: both;
        }

        .l_heng_shang p:nth-child(2){
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
        }
        .l_center_shu{
            position: absolute;
            top: 101px;
            left: 5px;
            z-index: 1;
        }
        .l_adress{
            margin-top: 20px;
            width: 81px;
            white-space: nowrap;
            padding-left: 10px;
        }
        .heng_i{
            position: absolute;
            top: -8px;
            left: 42px;
            background-color: white;
            z-index: 2;
        }

    </style>
    <link rel="stylesheet" href="{{asset('admin_assets/css/bootstrap-datetimepicker.min.css')}}">
@stop
@section('content')
    <div class="content-wrapper" style="background-color: white">
        <section class="content">
            <div class="row">
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
                    <div class="small-box bg-aqua">
                        <div class="inner">
                            <h3>210</h3>
                            <p>业务总数</p>
                        </div>
                        <div class="icon">
                            <i class="fa fa-bar-chart"></i>
                        </div>
                        <a href="#" class="small-box-footer">详情<i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
                    <div class="small-box bg-green">
                        <div class="inner">
                            <h3>210</h3>
                            <p>处理中</p>
                        </div>
                        <div class="icon">
                            <i class="fa fa-bar-chart"></i>
                        </div>
                        <a href="#" class="small-box-footer">详情<i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
                    <div class="small-box bg-yellow">
                        <div class="inner">
                            <h3>44</h3>
                            <p>未开始</p>
                        </div>
                        <div class="icon">
                            <i class="fa fa-bar-chart"></i>
                        </div>
                        <a href="#" class="small-box-footer">详情<i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
                    <div class="small-box bg-green-gradient">
                        <div class="inner">
                            <h3>65</h3>
                            <p>未完成</p>
                        </div>
                        <div class="icon">
                            <i class="fa fa-bar-chart"></i>
                        </div>
                        <a href="#" class="small-box-footer">详情<i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
                    <div class="small-box bg-red">
                        <div class="inner">
                            <h3>65</h3>
                            <p>已完成</p>
                        </div>
                        <div class="icon">
                            <i class="fa fa-bar-chart"></i>
                        </div>
                        <a href="#" class="small-box-footer">详情<i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
                    <div class="small-box bg-teal-gradient">
                        <div class="inner">
                            <h3>0</h3>
                            <p>空空空</p>
                        </div>
                        <div class="icon">
                            <i class="fa fa-bar-chart"></i>
                        </div>
                        <a href="#" class="small-box-footer">详情<i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th class="process-index-th">编号</th>
                                <th class="process-index-th">类型</th>
                                <th class="process-index-th">名称</th>
                                <th class="process-index-th">申请人</th>
                                <th class="process-index-th">联系电话</th>
                                <th class="process-index-th">申请日期</th>
                                <th class="process-index-th">款项金额</th>
                                <th class="process-index-th">尾款金额</th>
                                <th class="process-index-th">尾款支付时间</th>
                                <th class="process-index-th">进度</th>
                                <th class="process-index-th">报件资料</th>
                                <th class="process-index-th">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td class="process-index-td">1</td>
                                <td class="process-index-td">商标</td>
                                <td class="process-index-td">壹</td>
                                <td class="process-index-td">刘一</td>
                                <td class="process-index-td">13100001100</td>
                                <td class="process-index-td">2017.10.11</td>
                                <td class="process-index-td">¥19800.00</td>
                                <td class="process-index-td">¥9000.00</td>
                                <td class="process-index-td">2017.11.10</td>
                                <td class="process-index-td">未结算</td>
                                <td class="process-index-td">未上传</td>
                                <td class="process-index-td">
                                    <a href="{{url('commodity-detail')}}">查看详情</a>
                                    <a href="#">官方文件</a>
                                    <a href="#" data-toggle="modal" data-target="#modal-update-progress">更新进度</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>
    @include('public/update-progressModal')
@stop
@section('javascript')
@stop
